<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件规范 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../../../layui/css/layui.css"   media="all">
  <link rel="stylesheet" href="../../../css/Global.css"  media="all">
  
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../../index.html">
      <img src="../../../res/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">

      </li>
      <li class="layui-nav-item ">

      </li>
      
      <li class="layui-nav-item">

      </li>
    </ul>
  </div>
</div>
<ul class="site-dir">
  <li><a href="#before"><cite>预先加载</cite></a></li>
  <li><a href="#trigger"><cite>按需加载</cite></a></li>
  <li><a href="#space"><cite>组件命名空间</cite></a></li>
  <li><a href="#extend"><cite>扩展一个Layui组件</cite></a></li>
</ul>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="../index.html" ><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon ">
      <a href="infrastructure.html" >
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="element.html" >
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon layui-this">
      <a href="modules.html" >
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="../element/color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="../element/icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/button.html" >
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/table.html">
        <cite>表格</cite>
        <em>table - v1.0.5 新增</em>
      </a>
    </li>
   
    
    <li><h2>内置组件</h2></li>
    
    <li >
      <a href="../modules/layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li >
      <a href="../modules/layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li >
      <a href="../modules/laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li >
      <a href="../modules/laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li >
      <a href="../modules/laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li >
      <a href="../modules/layedit.html">
        <i class="layui-icon">&#xe639;</i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li >
      <a href="../modules/form.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li >
      <a href="../modules/upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li >
      <a href="../modules/element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li >
      <a href="../modules/tree.html">
        <i class="layui-icon">&#xe62e;</i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li >
      <a href="../modules/util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li >
      <a href="../modules/flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li >
      <a href="../modules/code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1">组件规范</h1>
    <div class="site-tips site-text">
      <p>Layui的组件是基于 <em>layui.js</em> 内部实现的异步模块加载方式，它并不遵循于AMD（没有为什么，毕竟任性呀！），而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为Layui最核心的引擎。你将脱离于经典的<em>Require.js</em>和时下的统治者<em>WebPack</em>那一堆看似“逼格”的配置，返璞归真，再次回到经典模式，放下手中那些被捧的飞上天的工具，轻装上阵，静静地撸一会原生态的前端代码。</p>
    </div>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>

    
    <div class="site-title">
      <fieldset><legend><a name="before">预先加载</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>开门见山，还是直接说使用比较妥当。Layui的组件加载采用核心的 <em>layui.use(mods, callback)</em>方法，当你的JS
      需要用到Layui组件的时候，我们更推荐你采用预先加载，因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义： </p>
      <pre class="layui-code" lay-title="demo.js">
/*
  Demo1.js
  使用Layui的form和upload组件
*/
layui.use(['form', 'upload'], function(){  //如果只加载一个组件，可以不填数组。如：<em>layui.use('form')</em>
  var form = layui.form() //获取form组件
  ,upload = layui.upload; //获取upload组件
  
  //监听提交按钮
  form.on('submit(test)', function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: '上传接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="trigger">按需加载</a>（不推荐）</legend></fieldset>
    </div>
    <div class="site-text">
      <p>如果你有强迫症，你对网站的性能有极致的要求，你并不想预先加载所需要的模块，而是在触发一个动作的时候，才去加载模块，那么，这是允许的。你不用在你的JS最外层去包裹一个大大的 layui.use，你只需要：</p>
      <pre class="layui-code" lay-title="demo.js">
/*
  Demo2.js
  按需加载一个Layui组件
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui组件
button.addEventListener('click', function(){
  layui.use('laytpl', function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl('').render({});
    console.log(html);
  });
});
      </pre>
      <p style="color: #FF5722"> 
        注意：如果你的JS中需要大量用到组件，我们并不推荐你采用这种加载方式，因为这意味着你要写很多layui.use()，代码可维护性不高。
        <br>建议还是采用：预先加载。即一个JS文件中，写一个use即可。
      </p>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="space">组件命名空间</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>Layui的全部组件绑定在 layui对象下，内部由layui.define()方法来完成。每一个组件都会一个特有的名字，并且无法被占用。所以你无需担心组件的空间被污染，除非是你 delete layui.mod; 调用一个组件也必须借助layui对象的赋值。如：</p>
      <pre class="layui-code">
layui.use(['layer', 'laypage', 'laydate'], function(){
  var layer = layui.layer //获得layer组件
  ,laypage = layui.laypage //获得laypage组件
  ,laydate = layui.laydate; //获得laydate组件
  
  //使用组件
});      
      </pre>
      <p>一个组件一旦加载后，就会注册在layui对象下，所以你无法直接用组件名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个组件，如：</p>
      <pre class="layui-code">
&lt;input onclick="layui.laydate()">
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="extend">扩展一个Layui组件</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>Layui官方提供的组件有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个组件。那么你有必要认识<em>layui.define()</em>方法，相信你在文档左侧的“底层支持”中已有所阅读。下面就就让我们一起扩展一个Layui组件吧：</p>
      <p>第一步：确认组件名，假设为：<em>test</em>，然后新建一个<em>test.js</em> 文件放入项目任意目录下（注意：不用放入layui目录）</p>
      <p>第二步：编写test.js 如下：</p>
      <pre class="layui-code">
/**
  扩展一个test组件
**/      
 
layui.define(function(exports){ //提示：组件也可以依赖其它组件，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'test'));
    }
  };
  
  //输出test接口
  exports('test', obj);
});    
      </pre>
      <p>第三步：设定扩展组件所在的目录，然后就可以在别的JS文件中使用了</p>
      <pre class="layui-code">
//config的设置是全局的
layui.config({
  base: '/res/js/' //假设这是test.js所在的目录
}).extend({ //设定组件别名
  test: 'test' //如果test.js是在根目录，也可以不用设定别名
  ,test1: 'admin/test1' //相对于上述base目录的子目录
});
 
//使用test
layui.use('test', function(){
  var test = layui.test;
  
  test.hello('World!'); //弹出Hello World!
});
//使用test1
layui.use('test1', function(){
  var test = layui.test1;
  
  //……
});
      </pre>
      <p>大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。</p>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="other">结语</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>其实关于模块的核心，就是layui.js的两个底层方法：一个用于定义模块的<em>layui.define()</em>，一个加载模块的<em>layui.use()</em>。</p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2017 &copy; <a href="../../index.html">layui.com</a> MIT license</p>
    <p>
      <a href="../../../fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">合作联系</a>
      <a href="../../../github.com/sentsin/layui/index.html" target="_blank">Git仓库</a>
      <a href="../../../fly.layui.com/jie/2461.html"  target="_blank">微信公众号</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../../../layui/layui.js" charset="utf-8"></script>
<script src="../../Js/doc.js" type="text/javascript"></script>

<script>
</script>
</body>
</html>